<template>
	<view class="reimbursement-container">
	    <view class="header">
	      <view class="back-icon" @click="goBack">
	        <image src="@/static/back-icon.png" mode="aspectFill"></image>
	      </view>
	      <view class="title">报销</view>
	      <view class="add-btn" @click="goToAdd">新增</view>
	    </view>
	    <view class="search-bar">
	      <image src="@/static/search-icon.png" mode="aspectFill"></image>
	      <input type="text" placeholder="请输入关键词搜索">
	    </view>
	    <view class="table-header">
	      <view class="col">报销人</view>
	      <view class="col">报销金额</view>
	      <view class="col">笔数</view>
	      <view class="col">状态</view>
	      <view class="col">操作</view>
	    </view>
	    <view class="table-body">
	      <view class="table-row" v-for="(reimbursement, index) in reimbursementList" :key="index">
	        <view class="col">{{reimbursement.reimburser}}</view>
	        <view class="col">{{reimbursement.amount}}</view>
	        <view class="col">{{reimbursement.count}}</view>
	        <view class="col">{{reimbursement.status}}</view>
	        <view class="col operation-col">
	          <view v-if="reimbursement.status === '草稿' || reimbursement.status === '初审驳回' || reimbursement.status === '终审驳回'" class="operation-item" @click="editReimbursement(reimbursement)">编辑</view>
	          <view class="operation-item" @click="viewDetails(reimbursement)">详情</view>
	        </view>
	      </view>
	    </view>
	  </view>
</template>

<script>
	export default {
		data() {
			return {
			reimbursementList: [
			        {
			          reimburser: '张三',
			          amount: 500,
			          count: 2,
			          status: '终审驳回'
			        },
			        {
			          reimburser: '张三',
			          amount: 500,
			          count: 3,
			          status: '终审'
			        },
			        {
			          reimburser: '张三',
			          amount: 500,
			          count: 1,
			          status: '初审驳回'
			        },
			        {
			          reimburser: '张三',
			          amount: 488,
			          count: 2,
			          status: '初审'
			        },
			        {
			          reimburser: '张三',
			          amount: 485,
			          count: 1,
			          status: '审核完成'
			        },
			        {
			          reimburser: '张三',
			          amount: 488,
			          count: 2,
			          status: '草稿'
			        }
			      ]
	
			}
		},
		methods: {
			goBack() {
			      uni.navigateBack();
			    },
			    goToAdd() {
			      uni.navigateTo({
			        url: '/pages/add-reimbursement/add-reimbursement'
			      });
			    },
			    editReimbursement(reimbursement) {
			      // 编辑报销单逻辑，比如跳转到编辑页面并传参
			      uni.navigateTo({
			        url: `/pages/edit-reimbursement/edit-reimbursement?id=${reimbursement.id}`
			      });
			    },
			    viewDetails(reimbursement) {
			      // 查看详情逻辑，比如跳转到详情页面并传参
			      uni.navigateTo({
			        url: `/pages/reimbursement-details/reimbursement-details?id=${reimbursement.id}`
			      });
			    }
		}
	}
</script>

<style scoped>
.reimbursement-container {
  padding: 20rpx;
  background-color: #f7f7f7;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.back-icon {
  width: 40rpx;
  height: 40rpx;
}
.back-icon image {
  width: 100%;
  height: 100%;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
}
.add-btn {
  background-color: #007AFF;
  color: white;
  padding: 10rpx 20rpx;
  border-radius: 5rpx;
  font-size: 28rpx;
}
.search-bar {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 10rpx;
  padding: 10rpx;
  margin-bottom: 20rpx;
}
.search-bar image {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
}
.search-bar input {
  flex: 1;
  border: none;
  font-size: 28rpx;
}
.table-header {
  display: flex;
  justify-content: space-between;
  background-color: white;
  border-radius: 10rpx 10rpx 0 0;
  margin-bottom: 10rpx;
}
.col {
  flex: 1;
  text-align: center;
  padding: 10rpx;
  font-size: 28rpx;
  border-bottom: 1rpx solid #ccc;
}
.table-body {
  background-color: white;
  border-radius: 0 0 10rpx 10rpx;
}
.table-row {
  display: flex;
  justify-content: space-between;
  padding: 10rpx;
  border-bottom: 1rpx solid #ccc;
}
.operation-col {
  display: flex;
  justify-content: flex-end;
}
.operation-item {
  font-size: 28rpx;
  color: #007AFF;
  margin-left: 10rpx;
  cursor: pointer;
}
</style>
